<!DOCTYPE html>
<html>
    <head>
        <title>Administration</title>
        <style type="text/css">
            body {
                margin      : 0px;
                padding     : 0px;
                font-family : arial;
            }
            
            input {
                margin  : 0px;
                padding : 0px;
            }
            
            img {
                padding : 10px 0px;
            }
            
            table {
                font-size : 12px;
                margin    : 22px auto;
            }
            
            table tr th {
                background : #afafaf;
                color      : #fff;
                font-size  : 14px;
            }
            
            table tr td {
                text-align : left;
            }
            
            .row-data:hover {
                background : #8888ff;
                cursor     : help;
            }
            
            #logout {
                position : absolute;
                top      : 0px;
                right    : 0px;
            }
            
            .center {
                margin : 0px auto;
            }

            header {
                background : #efefef;
                height     : 22px;
                width      : 100%;
                position   : fixed;
                top        : 0px;
            }

            #navigation {
                margin  : 0px;
                padding : 0px;
            }

            #navigation li {
                cursor          : pointer;
                list-style-type : none;
                font-weight     : bold;
                padding         : 1px 5px;
                float           : left;
            }
            
            #navigation li:hover {
                background : #fff;
            }
            
            .search {
                float : right;
            }
            
            .light {
                background : #fff;
            }
            
            .dark {
                background : #efefef;
            }
            
            .row-search a {
                float : left;
            }
            
            #contents {
                text-align : center;
            }
            
            #loader {
                width    : 100px;
                height   : 20px;
                overflow : hidden;
                border   : #bfbfbf 1px solid;
                margin   : 10% auto;
            }
            
            #loader div {
                width      : 20px;
                height     : 20px;
                background : #bfbfbf;
            }
            
            #pagination {
                margin     : 0px auto;
                text-align : center;
                z-index    : 200;
                position   : fixed;
                bottom     : 0px;
                background : #fff;
                width      : 100%;
            }
        </style>
    </head>
    <body>
        <header>
            <ul id="navigation">
                <?php foreach ($navigation as $name) :?>
                    <li onclick="loadTable('<?php echo $name?>');">
                        <?php echo strtoupper(str_replace('_', ' ', $name));?>
                    </li>
                <?php endforeach;?>
            </ul>
            
            <form method="post" action="" id="logout">
                <input type="hidden" value="logout" name="type" />
                <input type="submit" value="LOGOUT" />
            </form>
        </header>
        
        <div id="contents"></div>
        
        <footer></footer>
        
        <script type="text/javascript">
        <!--
        var baseURL  = "<?php echo $baseURL;?>";
        var contents = document.getElementById("contents");
        var i        = 0;
        var tbl      = '';

        function loadTable(table) {
            ajax({
                url     : baseURL,
                method  : 'post',
                data    : 'type=select&offset=0&table='+table,
                wait    : function() {
                    contents.innerHTML = '<div id="loader"><marquee behavior="scroll" direction="right" scrollamount="15"><div></div></marquee></div>';
                },
                success : function(data) {
                    contents.style.opacity = 0;
                    contents.innerHTML     = data;
                    tbl                    = table;

                    fadeIn();
                }
            });
        }
        
        function loadPage(table, page) {
            var offset = 20 * (page - 1);
            ajax({
                url     : baseURL,
                method  : 'post',
                data    : 'type=select&offset='+offset+'&table='+table,
                wait    : function() {
                    contents.innerHTML = '<div id="loader"><marquee behavior="scroll" direction="right" scrollamount="15"><div></div></marquee></div>';
                },
                success : function(data) {
                    contents.style.opacity = 0;
                    contents.innerHTML     = data;
                    tbl                    = table;

                    fadeIn();
                }
            });
        }
        
        function showDetails(offset, row) {
            ajax({
                url     : baseURL,
                method  : 'post',
                data    : 'type=read&table='+tbl+'&offset='+offset+'&row='+row,
                wait    : function() {
                    contents.innerHTML = '<div id="loader"><marquee behavior="scroll" direction="right" scrollamount="15"><div></div></marquee></div>';
                },
                success : function(data) {
                    contents.style.opacity = 0;
                    contents.innerHTML     = data;
                    fadeIn();
                }
            });
        }
        
        function fadeIn() {
            if (i <= 1) {
                i += 0.05;
                contents.style.opacity = i;
                requestAnimFrame(fadeIn, contents);
            } else {
                i = 0;
            }
        }
        
        //perform ajax call
        function ajax(params) {
            var xmlhttp;

            if (params.wait != undefined) {
                params.wait();
            }

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (params.success != undefined) {
                        params.success(xmlhttp.responseText);
                    }
                }
            }

            if (params.method == undefined) {
                xmlhttp.open('get', params.url, true);
                xmlhttp.send();
            } else if (params.method.toLowerCase() == 'get') {
                xmlhttp.open(params.method, params.url + '?' + params.data, true);
                xmlhttp.send();
            } else {
                xmlhttp.open(params.method, params.url, true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(params.data);
            }
        }

        //get animation frame
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame       ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame    ||
                   window.oRequestAnimationFrame      ||
                   window.msRequestAnimationFrame     ||
                   function(callback, element) {
                    window.setTimeout(callback, 1000/60);
                   }
        })();
        
        /*document.getElementByClass = function(className) {
            var elems = document.getElementsByTagName('*');
            for (i in elems) {
                if(elems[i].className == className ||
                   elems[i].className == className) {
                    return elems[i];
                }
            }
        }*/
        //-->
        </script>
    </body>
</html>
